<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>调查问卷</title>
  <link rel="icon" href="img/q11.png" type="image/x-icon" />
  <link rel="shortcut icon" href="img/q11.png" type="image/x-icon" />
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/layui.css">
</head>

<body style="background-image: url(img/4.jpg);;background-size: cover;">
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black">调查问卷</div>
      <!-- 头部区域（可配合layui 已有的水平导航） -->
      <ul class="layui-nav layui-layout-left">
        <!-- 移动端显示 -->
        <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
          <i class="layui-icon layui-icon-spread-left"></i>
        </li>

        <li class="layui-nav-item layui-hide-xs"><a href="">问卷列表</a></li>
        <li class="layui-nav-item layui-hide-xs"><a href=""></a></li>
        <li class="layui-nav-item layui-hide-xs"><a href=""></a></li>
      </ul>
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-md-inline-block">
          <a href="javascript:;">
            <img src="img/1.jpg" class="layui-nav-img">
            {{username}}
          </a>
          <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
            <a href="" onclick="manage('{{myuserId}}')">
              管理
            </a>
          </li>
        <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
          <a href="" onclick="logout()">
            退出
          </a>
        </li>
        </li>
      </ul>
    </div>

    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed">

          </li>
          <li class="layui-nav-item">
            
          </li>
          <!-- <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li> -->

          <li class="layui-nav-item"><a href="" data-toggle="modal" data-target="#createtitle">+创建问卷</a></li>
          <li class="layui-nav-item"><a href="/">全部问卷</a></li>
          <li class="layui-nav-item"><a onclick="mytitle('{{userId}}')">我的问卷</a></li>

        </ul>
      </div>
    </div>

    <div class="layui-body" style="opacity: 0.5;">
      <!-- 内容主体区域 -->
      {% for msg in msgs %}
      <div style="padding: 15px;" id="{{msg.id}}">

        <div class="layui-card" id="surveys" style="border: 1px dashed;">
          <div class="layui-card-header">

            <label for="" style="font-weight:bold;"><b>问卷标题：{{msg.title}}</b></label>
            <label for="" style="float: right;"> id:{{msg.id}}</label>
          </div>


          <div class="layui-card-body">
            <label for="">问卷说明：{{msg.description}}</label>
            <div style="float: right;">
              <button type="button" class="layui-btn" onclick="answer('{{msg.id}}')">回答问卷</button>
              &nbsp;&nbsp;
              <button type="button" class="layui-btn" onclick="deletes('{{msg.id}}')">删除问卷</button>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <!-- <div class="layui-footer"> -->
    <!-- 底部固定区域 -->
    <!-- 底部固定区域 -->
    <!-- </div> -->
  </div>


  <div class="modal fade" id="createtitle" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">创建调查问卷</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <input type="text" class="form-control" aria-describedby="passwordHelpInline" id="onetitle"
                placeholder="请输入标题">
              <br>
              <input type="text" class="form-control" aria-describedby="passwordHelpInline" placeholder="添加问卷说明"
                id="onedescription">

            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addsave()" data-toggle="modal"
            data-target="#addquestionnaire">保存</button>
        </div>
      </div>
    </div>
  </div>



  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/layui.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


  <script>
    //管理
    function manage(userId){
      axios({
        method: 'post',
        url: '/administrationDon',
        data: {
          myuserId: userId
        },
      }).then(function (res) {
        // axios工具下，服务器真正返回的数据在返回对象的data中
        res = res.data;

        if (res.code === 200) {
          window.location.href = '/administration';
        } else {
          alert(res.msg);
        }
      }).catch((err) => {
        alert(err);
      });
    }



    //我的问卷
    function mytitle(userId) {

    }



    function answer(titleid) {
      var dt = titleid;

      axios({
        method: 'post',
        url: '/answer',
        data: {
          titlesId: dt
        },
      }).then(function (res) {
        // axios工具下，服务器真正返回的数据在返回对象的data中
        res = res.data;

        if (res.code === 200) {
          window.location.href = '/addanswer';
        } else {
          alert(res.msg);
        }
      }).catch((err) => {
        alert(err);
      });





    }






    function deletes(titleid) {

      var dt = titleid;

      axios({
        method: 'post',
        url: '/deleteDon',
        data: {
          deleteId: dt
        },
      }).then(function (res) {
        // axios工具下，服务器真正返回的数据在返回对象的data中
        res = res.data;

        if (res.code === 200) {
          window.location.reload()
        } else {
          alert(res.msg);
        }




      }).catch((err) => {
        alert(err);
      });
      // var dt = document.getElementById(titleid).style.display = "none";


      // document.getElementById(titleid).remove();

      //  var elem = document.getElementById(titleid);
      // return elem.parentNode.removeChild(elem);
    }



    //添加名称
    function addsave() {
      let title = $('#onetitle').val();
      let description = $('#onedescription').val();
      if (title.length > 0) {
        axios({
          method: 'post',
          url: '/surveyName',
          data: {
            onetitle: $('#onetitle').val(),
            onedescription: $('#onedescription').val(),

          }
        }).then(function (response) {
          // axios工具下，服务器真正返回的数据在返回对象的data中
          let res = response.data;
          if (res.code === 200) {
            window.location.assign(encodeURI("/addquestionnaire?p=" + title));
          } else {
            alert(res.msg);
          }
        }).catch((err) => {

        });
      }
      else {
        alert('警告:标题、问卷说明不能为空');
      }

    }

    // 注销登录
    function logout() {
      axios({
        method: 'post',
        url: '/logout'
      }).then(function (response) {
        // axios工具下，服务器真正返回的数据在返回对象的data中
        let res = response.data;
        if (res.code === 200) {
          window.location.href = '/login';
        }
      }).catch((err) => {

      });
    }
  </script>
</body>

</html>